<template>
  <div id="video">
    <div id="videoBar" style='-webkit-app-region: drag;'>
      <i class="el-icon-rank"></i>
      <span id="videoTitle">{{ sTitle }} {{ sStartTime }}</span>
      <i class="el-icon-close" style='-webkit-app-region: no-drag; color: #ff0000; float: right;' @click="close"></i>
    </div>
    <div id="dplayer"></div>
    <div id="dplayerPanel">
      <el-button v-on:click="rotateY" size="mini" circle>翻转</el-button>
      <el-button v-on:click="rotate" size="mini" circle>旋转</el-button>
      <el-button v-on:click="showPath" size="mini">地址</el-button>
      <h1>{{ msg }}</h1>
    </div>
  </div>
</template>

<script>
import 'dplayer/dist/DPlayer.min.css'
import DPlayer from 'dplayer'

export default {
  name: 'playvideo-page',
  data () {
    return {
      msg: '',
      urlVideo: '',
      flvPlayer: null,
      flagPlay: false,
      max: 100,
      value1: 0,
      playing: false,
      degY: 0,
      deg: 0,
      isDown: false,
      dp: null,
      sTitle: '',
      sStartTime: ''
    }
  },
  methods: {
    close () {
      window.close()
    },
    rotateY () {
      if (this.degY === 0) {
        this.degY = 180
      } else {
        this.degY = 0
      }
      var video1 = document.getElementsByClassName('dplayer-video')
      console.log('video1', video1[0])
      console.log(video1[0].width)
      console.log(video1[0].height)

      var div1 = document.getElementById('dplayer')
      let offsetWidth = div1.offsetWidth
      let offsetHeight = div1.offsetHeight

      let sTranslate = ''
      if (this.degY === 180) {
        if (this.deg === 0 || this.deg === 90) {
          sTranslate = 'translate(' + Math.ceil(Math.abs(offsetHeight - offsetWidth) / 2) + 'px, 0px);'
        } else {
          sTranslate = 'translate(-' + Math.ceil(Math.abs(offsetHeight - offsetWidth) / 2) + 'px, 0px);'
        }
      } else {
        if (this.deg === 0 || this.deg === 90) {
          sTranslate = 'translate(-' + Math.ceil(Math.abs(offsetHeight - offsetWidth) / 2) + 'px, 0px);'
        } else {
          sTranslate = 'translate(' + Math.ceil(Math.abs(offsetHeight - offsetWidth) / 2) + 'px, 0px);'
        }
      }

      video1[0].style.cssText = 'transform: rotate(' + this.deg + 'deg) rotateY(' + this.degY + 'deg) ' +
        sTranslate
      let clientlenght = offsetHeight > offsetWidth ? offsetHeight : offsetWidth
      var video2 = document.getElementsByClassName('dplayer-video-wrap')
      video2[0].style.cssText = 'background: inherit; width: ' + clientlenght + 'px; height: ' + clientlenght + 'px;'
      div1.style.cssText = 'width: ' + offsetWidth + 'px;' + 'height: ' + offsetHeight + 'px;'
    },
    rotate () {
      var div1 = document.getElementById('dplayer')
      let offsetWidth = div1.offsetWidth
      let offsetHeight = div1.offsetHeight
      console.log('dplayer', div1.offsetWidth)
      console.log('dplayerheight', div1.offsetHeight)
      window.resizeTo(offsetHeight + 0, offsetWidth + 55 + 21)
      this.deg = (this.deg + 90) % 360
      let sTranslate = ''
      if (this.degY === 180) {
        if (this.deg === 0 || this.deg === 90) {
          sTranslate = 'translate(' + Math.ceil(Math.abs(offsetHeight - offsetWidth) / 2) + 'px, 0px);'
        } else {
          sTranslate = 'translate(-' + Math.ceil(Math.abs(offsetHeight - offsetWidth) / 2) + 'px, 0px);'
        }
      } else {
        if (this.deg === 0 || this.deg === 90) {
          sTranslate = 'translate(-' + Math.ceil(Math.abs(offsetHeight - offsetWidth) / 2) + 'px, 0px);'
        } else {
          sTranslate = 'translate(' + Math.ceil(Math.abs(offsetHeight - offsetWidth) / 2) + 'px, 0px);'
        }
      }
      var video1 = document.getElementsByClassName('dplayer-video')
      console.log('video1', video1[0])
      video1[0].style.cssText = 'transform: rotate(' + this.deg + 'deg) rotateY(' + this.degY + 'deg) ' +
        sTranslate

      let clientlenght = offsetHeight > offsetWidth ? offsetHeight : offsetWidth
      var video2 = document.getElementsByClassName('dplayer-video-wrap')
      video2[0].style.cssText = 'background: inherit; width: ' + clientlenght + 'px; height: ' + clientlenght + 'px;'

      div1.style.cssText = 'width: ' + offsetHeight + 'px;' + 'height: ' + offsetWidth + 'px;'
    },
    loadVideo (url, isLive) {
      var v = this
      console.log(url)
      /* eslint-disable */
      v.dp = new DPlayer({
        container: document.getElementById('dplayer'),
        live: isLive,
        autoplay: false,
        screenshot: true,
        danmaku: false,
        // danmaku: {
        //   addition: ['https://api.prprpr.me/dplayer/v2/bilibili?aid=20703809']
        // },
        video: {
          url: url,
          type: 'auto'
        }
      })
      /* eslint-enable */
      console.log(v.dp)
      v.dp.on('error', function () {
        console.log('error')
        v.dp.switchVideo({
          url: url,
          type: 'flv'
        })
      })
      v.dp.on('loadedmetadata', function (m) {
        console.log('load', m)
        var video2 = document.getElementsByClassName('dplayer-video-wrap')
        video2[0].style.background = 'inherit'
        v.dp.play()
        // v.dp.danmaku.opacity(1)
        // v.msg = dp.video.videoWidth + ' X ' + dp.video.videoHeight + dp.video.duration
        console.log('loadedmetadata', v.dp.video)
        let div1 = document.getElementById('dplayer')
        let offsetWidth = div1.offsetWidth
        let offsetHeight = div1.offsetHeight
        window.resizeTo(offsetWidth + 16, offsetHeight + 55 + 21)
      })
    },
    showPath () {
      this.$msgbox({
        title: '显示本视频的源地址',
        message: this.$route.query.streamPath,
        confirmButtonText: '确定',
        center: true
      }).then(action => {

      }).catch(() => {

      })
    },
    drawDanmaku (sDanmdku) {
      var v = this
      console.log(sDanmdku)
      v.dp.danmaku.draw({
        text: sDanmdku,
        color: '#fff',
        type: 'right'
      })
    }
  },
  mounted: function () {
    console.log(this.$route.query)
    console.log(this.$route.query.streamPath)
    this.sTitle = this.$route.query.title.replace('生成中', '') + (typeof this.$route.query.number !== 'undefined' ? '[' + this.$route.query.number + ']' : '')
    this.sStartTime = this.$route.query.startTime
    this.loadVideo(this.$route.query.streamPath, this.$route.query.isLive === 'true')
  }
}
</script>

<style scoped>
  body {
    margin: 0px;
    padding: 0px;
  }
  body, div, form, img, ul, ol, li, dl, dt, dd, form, p {
    margin: 0px;
    padding: 0px;
    border: 0px none;
    list-style: none outside none;
    text-decoration:none;
  }
  #videoBar {
    width: 100%;
    height: 25px;
    background-color: #fefefe;
  }
  #videoTitle {
    font-size: 10px;
  }
  /* #dplayer {
    width: 100%;
    height: 100%;
  } */
  #dplayerPanel {
    width: 100%;
    height: 30px;
    background-color: #fefefe;
  }
</style>
